/**
 * Pie：饼图
 * @type {Object}
 */
import React  from 'react'
import style from './index.less'
import IECharts from '../IECharts'


/**
 * [饼图]
 * @type {Object}
 */
const Pie=({
	title='',
	data=[
			{value:335, name:'直接访问'},
			{value:310, name:'邮件营销'},
			{value:234, name:'联盟广告'},
			{value:135, name:'视频广告'},
			{value:1548, name:'搜索引擎'},
			{value:135, name:'视频广告1'},
			{value:1548, name:'搜索引擎1'},
			{value:135, name:'视频广告2'},
			{value:1548, name:'搜索引擎3'}
	],
	radius='55%',
	center= ['50%', '40%'],
	height=300,

})=>{
	const myProps={
		option : {
	    tooltip : {
	        trigger: 'item',
	        formatter: "{b} : {c} ({d}%)"
	    },
			legend: {
					top:'bottom',
					formatter: function (name) {
						const dataItem=data.find(item=>item.name===name)
						const score =dataItem.value
						const ratio=dataItem.ratio
						return  `${name}：${score}(${parseInt(ratio*10000)/100}%)`;
					},
					data:data.map((item,i)=>item.name)
			},
	    series : [
	        {
	            type: 'pie',
	            radius,
	            center,
	            data,
							label: {
                normal: {
									formatter: '{b}:\n {d}%'
                },
	            },
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
		}
	}
  return(
    <div  className={`chart`} style={{height}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

export default Pie
